<template>
  <main>
    <b-card-list :cardRecords="cardRecords" @handler="handler" />
    <c-pagination :total="total" :defaultPageSize="limit" />
  </main>
</template>

<script>
import BCardList from "@b/card-list.vue";
import { bookViewConfig } from "@vp/show/book.js";
import CPagination from "@c/pagination.vue";
import http from "@u/http";
import { watchEffect } from "@vue/runtime-core";
import { useLinkedRouteParam } from "@u/route";
import { useInfoNotice } from "@u/notice";
import { useRoutePathToPage } from "@u/router";
export default {
  components: {
    BCardList,
    CPagination,
  },
  setup() {
    const { cardRecords, limit, total } = bookViewConfig;
    const pageNum = useLinkedRouteParam("pageNum");

    watchEffect(
      async () => {
        try {
          const res = await http.get(
            `/articles?type=随笔&limit=${limit.value}&page=${pageNum.value}`
          );
          cardRecords.value = res.data.rows;
          total.value = res.data.count;
        } catch (error) {
          useInfoNotice({
            message: "获取失败",
            description: error.reason || error.data || "未知错误",
          });
        }
      },
      {
        flush: "post",
      }
    );

    const handler = (id) => {
      const toPage = useRoutePathToPage(`/detail/${id}`);
      toPage();
    };

    return {
      cardRecords,
      total,
      limit,
      handler,
    };
  },
};
</script>

<style scoped>
</style>